<template>
	<!-- 废弃 -->
	<view class="city_list">
		<!-- 搜索框 S -->
		<view class="seach_wraper">
			<view class="search"><uni-search-bar placeholder="请输入车站名称搜索" @input="onInput" @cancel="onCancel" cancelButton="none" maxlength="30"></uni-search-bar></view>
		</view>
		<!-- 搜索框 E -->
		<!-- 车站列表 S -->
		<view class="list">
			<view class="list_item" v-for="(item, index) in stationList" v-show="!item.show" :key="index" @click="selectStation(item)">
				<view class="title">
					<text class="title_item">城市</text>
					<text class="title_item">{{ item.name }}</text>
					<text class="title_item">- {{ item.province }}</text>
				</view>
				<view class="list2">
					<view class="list2_item" v-for="(station, index2) in item.list" :key="index2" v-show="filter(station, index)">
						<text>{{ station.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 车站列表 N -->
	</view>
</template>

<script>
import uniSearchBar from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue';
export default {
	components: { uniSearchBar },
	data() {
		return {
			keyword: '', // 输入框内容
			stationList: [] // 车站列表
		};
	},
	methods: {
		onInput(e) {
			this.keyword = e.value;
		},
		onCancel(e) {
			this.keyword = '';
		},
		// 输入检索
		filter(item, index) {
			const filter = item.name.indexOf(this.keyword) != -1;
			this.stationList[index].show = !filter;
			return filter;
		},
		selectStation(item) {
			uni.navigateBack({
				delta: 2
			});
		}
	},
	onLoad(options) {
		let stations = this.stationList;
		for (let i = 0; i < 3; i++) {
			if (i % 2 == 0) {
				stations.push({
					id: i,
					name: '广州' + i,
					province: '广东省',
					list: [
						{
							id: '2313',
							name: '省汽车客运站'
						}
					]
				});
			} else {
				stations.push({
					id: i,
					name: '广州' + i,
					province: '广东省',
					list: [
						{
							id: '2313',
							name: '省汽车客运站'
						},
						{
							id: '2314',
							name: '广州天河站'
						}
					]
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.city_list {
	padding-top: 128rpx;
	.seach_wraper {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 0rpx -1rpx rgba(209, 215, 225, 1);
		padding: 24rpx 0;
		.search {
			width: 690rpx;
			height: 80rpx;
			background: rgba(244, 246, 249, 1);
			margin: 0 auto;
			border-radius: 4rpx;
			/deep/ .uni-searchbar {
				padding: 0;
				background-color: rgba(244, 246, 249, 1);
			}
			/deep/ .uni-searchbar__box {
				height: 80rpx;
				line-height: 80rpx;
				border: none;
				justify-content: flex-start;
				border-radius: 4rpx !important;
				background-color: rgba(244, 246, 249, 1) !important;
				font-size: 28rpx !important;
				font-weight: 500;
				color: rgba(121, 132, 152, 1) !important;
			}
		}
		/deep/ .uni-searchbar {
			padding: 0;
			background-color: rgba(244, 246, 249, 1);
		}
		/deep/ .uni-searchbar__box {
			height: 80rpx;
			line-height: 80rpx;
			border: none;
			justify-content: flex-start;
			border-radius: 4rpx !important;
			background-color: rgba(244, 246, 249, 1) !important;
			font-size: 28rpx !important;
			font-weight: 500;
			color: rgba(121, 132, 152, 1) !important;
		}
	}
	.list {
		.list_item {
			padding: 40rpx 0 0 32rpx;
			.title {
				.title_item:first-child {
					display: inline-block;
					width: 49rpx;
					height: 28rpx;
					line-height: 28rpx;
					text-align: center;
					background: rgba(79, 196, 128, 1);
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: 300;
					color: rgba(255, 255, 255, 1);
					margin-right: 8rpx;
					vertical-align: 4rpx;
				}
				.title_item:nth-child(2) {
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					margin-right: 37rpx;
				}
				.title_item:last-child {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
				}
			}
			.list2 {
				margin-left: 86rpx;
				box-sizing: border-box;
				border-left: 1rpx solid #d1d7e1;
				border-bottom: 1rpx solid #d1d7e1;
				padding-left: 50rpx;
				position: relative;
				.list2_item {
					height: 100rpx;
					line-height: 100rpx;
					border-bottom: 1rpx solid #d1d7e1;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					position: relative;
				}
				.list2_item:last-child {
					border-bottom: none;
				}
				.list2_item::before {
					content: '';
					position: absolute;
					width: 28rpx;
					height: 1rpx;
					background-color: #d1d7e1;
					top: 49rpx;
					left: -50rpx;
				}
			}
			.list2::before {
				content: '车站';
				width: 49rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				background: rgba(25, 102, 255, 1);
				border-radius: 4rpx;
				font-size: 20rpx;
				font-weight: 300;
				color: rgba(255, 255, 255, 1);
				position: absolute;
				left: -87rpx;
				top: 30rpx;
			}
		}
	}
}
</style>
